<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">股票信息</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form [formGroup]="formModel" class="form-horizontal">
        <div class="box-body">
            <div class="form-group"
                 [class.has-error]="formModel.get('name').touched && (formModel.hasError('minlength','name') || formModel.hasError('required','name'))">
                <label for="name" class="col-sm-2 control-label">股票名称</label>
                <div class="col-sm-8">
                    <input formControlName="name" type="email" class="form-control"
                           id="inputEmail3" placeholder="股票名称">
                </div>
                  <span class="help-block" [class.hidden]="formModel.get('name').untouched || !formModel.hasError('required','name')">
                    股票名称是必填项
                </span>
                    <span class="help-block" [class.hidden]="formModel.get('name').untouched || !formModel.hasError('minlength','name')">
                    请至少输入3个字
                </span>
            </div>
            <div class="form-group" [class.has-error]="formModel.hasError('required','price')">
                <label for="price" class="col-sm-2 control-label">股票价格</label>
                <div class="col-sm-6">
                    <input type="number" formControlName="price" class="form-control" id="inputPassword3"
                           placeholder="股票价格">
                </div>
                <span class="help-block" [class.hidden]="!formModel.hasError('required','price')">
                    股票价格是必填项
                </span>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">股票星级</label>
                <div class="col-sm-10">
                    <app-stars [(rating)]="stock.rating" [readonly]="false"></app-stars>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">股票描述</label>
                <div class="col-sm-10">
                    <textarea name="" formControlName="desc" id="" cols="30" class="form-control" rows="5"></textarea>
                </div>
            </div>

            <div class="form-group" [class.has-error]="formModel.get('categories').touched && formModel.hasError('categoriesLength','categories')">
                <div>
                    <label class="col-sm-2 control-label">股票类型</label>
                </div>
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="row" formArrayName="categories">
                        <div *ngFor="let category of categories;let i = index;">
                            <div class="col-sm-2">
                                <div class="checkbox">
                                    <label>
                                        <input [formControlName]="i" type="checkbox"> {{category}}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <span class="help-block" [class.hidden]="!formModel.hasError('categoriesLength','categories')">
                    请至少选择一个类型
                </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="submit" (click)="cancle()" class="btn btn-default">取消</button>
            <button type="submit" (click)="save()" [disabled]="formModel.valid" class="btn btn-info pull-right">保存
            </button>
        </div>
        <!-- /.box-footer -->
    </form>
</div>
